<template>
  <div id="firstvue">
    <!--图片轮播-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="../images/banner_home1.jpg">
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="../images/banner_home2.jpg">
          <div class="carousel-caption"></div>
        </div>
        <div class="item">
          <img src="../images/banner_home3.jpg">
          <div class="carousel-caption"></div>
        </div>
      </div>

      <!-- Controls -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <div class="content_server">
      <p>服务项目</p>
      <div class="row_list">
        <div class="lefts">
          <span>业主大会第三方服务</span>
        </div>
        <div class="rights">
          <span>物业招投标服务</span>
        </div>
      </div>
      <div class="row_list row_two">
        <div class="lefts">
          <span>物业选聘顾问</span>
        </div>
        <div class="rights">
          <span>物业服务质量监理</span>
        </div>
      </div>
      <div class="row_list row_three">
        <div class="lefts">
          <span>设施设备查验服务</span>
        </div>
      </div>
    </div>
    <!--最新资讯-->
    <div class="information">
      <div class="information_title">
        <span>最新资讯</span>
      </div>
      <div class="info_content">
        <div class="new_list" @click="toInfoDetail(item.id)" v-for="(item,index) in data">
          <div class="img_size" v-if="item.files">
            <img :src="_filterObj(item.files)"/>
          </div>
          <div class="img_size" v-else>
            <img :src="imgUrl" alt="">
          </div>
          <div>
            <p class="ellipsis1">{{item.title}}</p>
            <p v-html="$options.filters.deleteImgSting(item.content)" class="ellipsis"></p>
          </div>
        </div>
      </div>
    </div>
    <!--经典案例-->
    <div class="case">
      <div class="information_title">
        <span>经典案例</span>
      </div>
      <div class="case_content">
       <ul>
          <li class="index" v-for="(item,index) in banners" :key="index" @click="toList(item.text)">
            <img :src="item.imgUrl">
            <span>{{item.label}}</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  @import "~common/sass/mixin.scss";

  #firstvue {
    margin-top: -17px;
  }

  .carousel-inner {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .carousel-inner .item {
    width: 100%;
  }

  .carousel-inner .item img {
    /*margin: 0;*/
    /*padding: 0;*/
    width: 100%;
  }

  /*服务项目板块*/
  .content_server {
    width: 100%;
    height: 380px;
    background: #e3e6e6;
    margin-top: 20px;
    /*background: red;*/
    margin-left: 0;
    padding-bottom: 20px;
  }

  .row_list {
    width: 100%;
    height: 86px;
    text-align: center;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 10px;

  }

  .content_server p {
    text-align: center;
    line-height: 40px;
    font-size: 16px;
  }

  .row span {
    font-size: 12px;
  }

  .lefts {
    width: 37%;
    height: 86px;
    background: #1a4e77;
    display: inline-block;
    border-radius: 10px;
  }

  .lefts span {
    color: #fff;
    text-align: center;
    line-height: 86px;
  }

  .rights {
    width: 37%;
    height: 86px;
    background: #1a4e77;
    display: inline-block;
    border-radius: 10px;
  }

  .rights span {
    color: #fff;
    text-align: center;
    line-height: 86px;
  }

  /*最新资讯板块*/
  .information {
    width: 100%;
    margin-top: 20px;
  }

  .information_title {
    line-height: 40px;
    background: #00a2e9;
    margin-bottom: 10px;
  }

  .information_title span {
    color: #fff;
    font-size: 14px;
    padding-left: 20px;
  }

  .new_list {
    height: 80px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .new_list .img_size {
    width: 25%;
    height: 80px;
    float: left;
    margin-left: 5px;
    margin-right: 5px;
  }

  .new_list div {
    float: left;
    width: 70%;
  }

  .ellipsis1 {
    @include ellipsis(1);
    font-size: 14px;
    margin-top: 20px;
    font-weight: bold;
  }

  .ellipsis {
    @include ellipsis(1);
    font-size: 12px;
  }

  /*金典案例*/
  .case {
    width: 100%;
    height: 1050px;
  }

  .case_content{
    width: 100%;
   padding-bottom: 20%;
  }
  .case_content ul {
    width: 100%;
    margin-top: -40px;
    margin-left: -1px;
    padding: 0;
  }

  .case_content ul li {
    list-style: none;
    float: left;
    margin-top: 40px;
    margin-left: 6px;
    width: 48%;
    height: 140px;
    cursor: pointer;

  }

  .case_content ul li img {
    width: 100%;
    height: 100%;
  }

  .case_content ul li span {
    width: 100%;
    height: 32px;
    background: #ececeb;
    line-height: 32px;
    text-align: center;
    font-size: 16px;
    display: flex;
    flex-direction: column;
  }
</style>
<script>
  import {getGroupData} from '../../http/article'

  import {filterObj} from '../../common/js/filterObj'

  export default {
    name: 'home',
    data() {
      return {
        data: [],
        total: 0,
        totalData: [],
        currentPage: 0,
        imgUrl: require('../images/new.png'),
        banners: [{
          imgUrl: require('./image/UptownVillage.png'),
          label: '上城区',
          text: 'case-shangcheng'
        }, {
          imgUrl: require('./image/downtown.png'),
          label: '下城区',
          text: 'case-xiacheng'
        }, {
          imgUrl: require('./image/jianggan.png'),
          label: '江干区',
          text: 'case-jiangggan'
        }, {
          imgUrl: require('./image/xiaoshan.png'),
          label: '萧山区',
          text: 'case-xiaoshan'
        }, {
          imgUrl: require('./image/yuhang.png'),
          label: '余杭区',
          text: 'case-yuhang'
        }, {
          imgUrl: require('./image/xihu.png'),
          label: '西湖区',
          text: 'case-xihu'
        }, {
          imgUrl: require('./image/binjiang.png'),
          label: '滨江区',
          text: 'case-bingjiang'
        }, {
          imgUrl: require('./image/gonshu.png'),
          label: '拱墅区',
          text: 'case-gongshu'
        }, {
          imgUrl: require('./image/fuyang.png'),
          label: '富阳区',
          text: 'case-fuyang'
        }, {
          imgUrl: require('./image/ningbo.png'),
          label: '宁波市',
          text: 'case-ningbo'
        }]

      }
    },
    created() {
      this._getGroupData('zixun')
    },
    methods: {
      _getGroupData(tag) {
        getGroupData(tag).then((res) => {
          this.data = res.data
//          this.total = res.data.length;
//          this.totalData = res.data;
//          this.data = res.data.slice(this.currentPage, 10);
          //console.log(this.data)
        })
      },
      toInfoDetail(id) {
        this.$router.push('detail/' + id)
      },
      toList(zone) {
        this.$router.push('casedetail/' + zone)
      },
      handleCurrentChange(val) {
        this.currentPage = val - 1
      },
      _filterObj(obj) {
        return filterObj(obj)[0].url
      }
    },
    watch: {
      currentPage(newVal) {
        this.data = this.totalData.slice(newVal * 10, (newVal + 1) * 10)
      }
    }
  }
</script>

